@if (label() || tooltip()) {
  <ix-label
    [label]="label()"
    [tooltip]="tooltip()"
    [required]="required()"
    [ixTestOverride]="controlDirective.name || ''"
  ></ix-label>
}

<mat-radio-group
  color="primary"
  [class.inline]="inlineFields()"
  [required]="required()"
  [disabled]="isDisabled"
  [ixTest]="controlDirective.name"
  [value]="value"
  [attr.aria-label]="label()"
  (change)="onRadiosChanged($event)"
>
  @for (option of options() | async; track option) {
    <div
      class="radio-item"
      [style.flex-basis]="fieldFlex()"
    >
      <mat-radio-button
        [value]="option.value"
        [ixTest]="[controlDirective.name, option.label]"
        [attr.aria-label]="option.label"
      >
        {{ option.label | translate }}
      </mat-radio-button>
      @if (option.tooltip) {
        <ix-tooltip
          class="tooltip"
          [header]="option.label | translate"
          [message]="option.tooltip | translate"
        ></ix-tooltip>
      }
    </div>
  }
</mat-radio-group>

@let control = controlDirective.control;
@if (control) {
  <ix-errors [control]="control" [label]="label()"></ix-errors>
}
